<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">

        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>Courses</title>

            <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/freebase/suggest/4_2/suggest.min.css" />
            <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>-->
            <script type="text/javascript" src="https://www.gstatic.com/freebase/suggest/4_2/suggest.min.js"></script>

            <script type="text/javascript">

                $(function() {
                    $("#courseid")
                            .suggest({
                        key: "AIzaSyA0Fjcd-S9IZV8WKl6o4JQsyTseu1M43NA",
                        show_id: true
                    })
                            .bind("fb-select", function(e, data) {
                        if (data.notable) {
                            document.getElementById('courseid').value = data.name + " " + '(' + data.notable.name + ')';
                        } else {
                            document.getElementById('courseid').value = data.name;
                        }
                    });
                });

            </script>
        </h:head>

        <h:body>

            <p:layout fullPage="true">
                <p:layoutUnit position="north" header="EducationX">
                    <p:toolbar style="height:25px">
                        <p:toolbarGroup align="left">
                            <h:link value="Courses" outcome="courses" />     
                            <p:separator />  
                            <h:link value="User Page" outcome="userPage"/>
                            <p:separator />  
                            <h:link value="Tags" outcome="tags"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">
                            <p:inputText id="courseid" style="width:300px; height:20px; font-size:12px" />
                            <p:button value="Search" style="top:3px; height:20px; font-size: 12px">
                            </p:button>
                        </p:toolbarGroup>
                    </p:toolbar> 

                </p:layoutUnit>

                <p:layoutUnit position="west" size="300">
                    <p:layout>
                        <p:layoutUnit position="center">
                            <h3>Arts</h3>
                            <p:separator />
                            <h3>Economics</h3>
                            <p:separator />
                            <h3>History</h3>
                            <p:separator />
                            <h3>Language</h3>
                            <p:separator />
                            <h3>Literature</h3>
                            <p:separator />
                            <h3>Science</h3>                            
                            <p:separator />
                            <h3>Sports</h3>
                            <p:separator />
                            <h3>Technology</h3>
                        </p:layoutUnit>
                    </p:layout>
                </p:layoutUnit>        

                <p:layoutUnit position="center">

                    <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
                    
                     <h:form>

                    <p:dataGrid var="car" value="#{courses.allCourses}" columns="3"
                                paginator="true"
                                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                >
                        <p:panel style="text-align:center">
                            <h:panelGrid columns="1" style="width:100%" >
                                <h:commandLink value="#{car.name}" action="#{user.enrollCoursePage}">
                                
                                    <f:setPropertyActionListener target="#{user.actionUser}" value="#{car}" />
                                </h:commandLink>
                                <p:scrollPanel style="width:250px;height:250px">
                                    <h:outputText value="#{car.description}" />
                                </p:scrollPanel> 
                                <p:tagCloud model="#{tagCloudBean.model}"  >
                                    <p:ajax onstart="#{tagCloudBean.onUpdate(car.courseId)}" />
                                </p:tagCloud>

                                
                            </h:panelGrid>
                        </p:panel>
                    </p:dataGrid>

                     </h:form>
                    
                </p:layoutUnit>
            </p:layout>
        </h:body>
    </f:view>
</html>
